// Adapted from https://codepen.io/akwright/pen/fmDiK/?editors=0100 / Codepen / @akwright

.beekeeper-studio-wrapper {
  $preloader-duration:  0.75s;
  $preloader-dimension: 1.25rem;

  .preloader {
    position:relative;
    height: 1.8rem;
    width: 1.8rem;
    .layer {
      display: block;
      position: absolute;
      height: $preloader-dimension;
      width: $preloader-dimension;
      border-radius: 50%;
      box-shadow: 2px 2px $theme-primary,
                  0 3px rgba(black, 0.4);
      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
      &:nth-of-type(1) {
        background: rgba($theme-primary, 0.65);
        margin-top: $preloader-dimension/1.8;
        animation: movedown $preloader-duration cubic-bezier(0.39, 0.575, 0.565, 1) $preloader-duration/2 infinite normal;
      }
      &:nth-of-type(2) {
        background: rgba($theme-primary, 0.65);
        margin-top: $preloader-dimension/3.6;
      }
      &:nth-of-type(3) {
        background: rgba($theme-primary, 0.65);
        animation: moveup $preloader-duration cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
      }
    }
  }
  @keyframes moveup {
    0%, 60%, 100% {
      transform: 
        rotateX(50deg)
        rotateY(0deg)
        rotateZ(45deg)
        translateZ(0);
    }
    25% {
      transform:
        rotateX(50deg)
        rotateY(0deg)
        rotateZ(45deg)
        translateZ(0.2rem);
    }
  }
  @keyframes movedown {
    0%, 60%, 100% {
      transform: 
        rotateX(50deg)
        rotateY(0deg)
        rotateZ(45deg)
        translateZ(0);
    }
    25% {
      transform:
        rotateX(50deg)
        rotateY(0deg)
        rotateZ(45deg)
        translateZ(-0.2rem);
    }
  }
}